<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>Events</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">

  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var address = "<%= @event.location %>";
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
          });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }

  }


 </script>
</head>

<body onload="initialize()">
  <p><b>Name:</b> <%=h @event.name %></p>

  <p><b>Time:</b> <%=h @event.time %></p>

  <p><b>Location:</b> <%=h @event.location %></p>

  <p><b>Icon:</b> <%=h @event.icon %></p>

  <p><b>Description:</b> <%=h @event.description %></p>

  <div id="map_canvas" style="width: 500px; height: 400px;"></div>

  <%= link_to 'Edit', edit_event_path(@event) %>|
  <%= link_to 'Back', events_path %>

</body>
</html>
